<template>
  <div>
    <ep-main-layout>
      <div slot="left" class="mLeft">
        <module-title title="集聚指数" path="/assembleInfo"></module-title>
        <div class="flex pd20">
          <div style="width:280px;height:280px">
            <r-text style="margin:20px" text="产业集聚指数"></r-text>
            <industry-number label="产业企业：" unit="家" :count="jjzs.cyqy"></industry-number>
            <industry-number style="margin-top:20px" label="规上企业：" unit="家" :count="jjzs.gsqy"></industry-number>
            <industry-number style="margin-top:20px" label="横店影院：" unit="个" :count="jjzs.hdyy"></industry-number>
          </div>
          <div style="flex:1;text-align:center">
            <r-text style="margin:20px" text="人力资源集群指数"></r-text>
            <guage-chart style="width:246px;height:175px" id="chart1" :data="jjzs.ysrczb"></guage-chart>
            <div style="padding-top:8px">当月注册群演：<span style="color:#64E6E2">{{jjzs.dyzcqy}}</span>人</div>
          </div>
        </div>
        <div class="dashDivider"></div>
        <div class="pd20">
          <r-text style="margin:20px" text="剧组集聚指数"></r-text>
          <div class="flex">
            <div style="padding-left:20px">
              <jz-info :data="jzInfo.ljjzs" unit="个" :icon="require('../assets/yjjzs.svg')" label="累计入驻剧组数"></jz-info>
              <jz-info style="margin-top:20px" :data="jzInfo.ljjzrs" unit="人" :icon="require('../assets/yjjzrs.svg')" label="累计入驻剧组人数"></jz-info>
            </div>
            <ring-chart id="chart2" :data="jzInfo" style="width:246px;height:202px;margin-left:45px"></ring-chart>
          </div>
        </div>
        <div class="dashDivider"></div>
        <div class="pd20">
          <r-text style="margin:20px 20px 10px 20px" text="集聚预测"></r-text>
          <jjyc style="height:242px;margin-left:20px" :data="jjyc"></jjyc>
        </div>
      </div>
      <div slot="center">
        <div class="center_top">
          <center-text :data="videoTalent" title="影视人才" type="1"></center-text>
          <center-text :data="totalInfo" title="整体情况" type="2"></center-text>

          <div class="img"  @mouseover="showTooltip = true" @mouseout="showTooltip = false" @mousedown="showWarn = true" style="z-index: 9"></div>
          <div class="side"></div>
          <div class="number">
            <div class="value">{{rlzyfzzs}}</div>
            <div class="label">人力资源服务发<br/>展协同指数</div>
          </div>
          <div style="margin-top:70px;">
          <center-text :data="videoEconomy" title="影视经济" type="3"></center-text>
          <center-text :data="totalInfo2" title="整体情况" type="4"></center-text>
          </div>
        </div>
         <div class="center_bottom">
          <active-info-modoule style="flex:1" :data="activeList.rcqz" title="人才求职"></active-info-modoule>
          <active-info-modoule style="flex:1" :data="activeList.fzhj" title="发展环境"></active-info-modoule>
          <active-info-modoule style="flex:1" :data="activeList.rcjg" title="人才结构"></active-info-modoule>
        </div>
      </div>
      <div slot="right">
        <module-title title="紧缺指数" path="/lackInfo"></module-title>
        <div class="right_top">
          <div style="padding:20px"><r-text style="" text="专业人员紧缺指数"></r-text></div>
          <professional-info :data="professionalInfo"></professional-info>
        </div>
        <div class="dashDivider"></div>
        <div style="padding:20px 20px 0 20px">
          <r-text text="群众演员紧缺指数"></r-text>
          <div class="flex" style="align-item:center;padding-top:18px">
            <img src="../assets/right-center-icon.png" style="width:212px;height:212px">
            <div class="group_info">
              <div>群演总数</div>
              <div class="total"></div>
              <div style="padding-top:20px">剧组月均需求群演数（人）</div>
              <div class="value" style="font-size:20px;color:#FFF">{{yjqyxq}}</div>
              <div class="ratio" :style="{'--ratio': ratio + '%'}"></div>
            </div>
          </div>
        </div>
        <div class="dashDivider"></div>
        <div style="padding:20px 20px 0 20px">
          <r-text text="配套人员紧缺指数"></r-text>
          <support-info :data="supportInfo"></support-info>
        </div>
      </div>

    </ep-main-layout>
    <video autoplay muted loop src="../assets/mainvideo.mp4" class="videobg">
    </video>
    <tooltip :show="showTooltip" :data="tooltipData"></tooltip>
    <warn-dialog :show.sync="showWarn" :data="warnData"></warn-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import EpMainLayout from '@/components/EpMainLayout.vue';
import ModuleTitle from '@/components/ModuleTitle.vue';
import RText from '../components/RText.vue';
import IndustryNumber from '../components/IndustryNumber.vue';
import GuageChart from '../components/GuageChart.vue';
import JzInfo from '../components/JzInfo.vue';
import RingChart from '../components/RingChart.vue';
import Jjyc from '../components/Jjyc.vue';
import CenterText from '../components/CenterText.vue';
import ActiveInfoModoule from '../components/ActiveInfoModoule.vue';
import ProfessionalInfo from '../components/ProfessionalInfo.vue';
import SupportInfo from '../components/SupportInfo.vue';
import Tooltip from '../components/Tooltip.vue';
import WarnDialog from '../components/WarnDialog.vue';
export default {
  components: {
    EpMainLayout,
    ModuleTitle,
    RText,
    IndustryNumber,
    GuageChart,
    JzInfo,
    RingChart,
    Jjyc,
    CenterText,
    ActiveInfoModoule,
    ProfessionalInfo,
    SupportInfo,
    Tooltip,
    WarnDialog
  },
  data() {
    return {
      jjzs: {
        cyqy: 0,
        gsqy: 0,
        hdyy: 0,
        //ysrczb: Math.floor(Math.random() * 80 + 20),
          ysrczb:0,
        dyzcqy: 0
      },
      jjyc: {
        cyjjqs: [{
                name: '2018',
                value: 0,
                value2: 0
            },{
                name: '2019',
                value: 0,
                value2: 0
            },{
                name: '2020',
                value: 0,
                value2: 0
            },{
                name: '2021',
                value: 0,
                value2: 0
            },{
                name: '2022',
                value: 0,
                value2: 0
            },
          ],
        rlzyjjqs: [{
                name: '2018',
                value: 0,
                value2: 0,
                value3: 0,
            },{
                name: '2019',
                value: 0,
                value2: 0,
                value3: 0,
            },{
                name: '2020',
                value: 0,
                value2: 0,
                value3: 0,
            },{
                name: '2021',
                value: 0,
                value2: 0,
                value3: 0,
            },{
                name: '2022',
                value: 0,
                value2: 0,
                value3: 0,
            },
            ],
          jzjjqs: [{
                name: '2018',
                value: 0,
                value2: 0,

            },{
                name: '2019',
                value: 0,
                value2: 0,

            },{
                name: '2020',
                value: 0,
                value2: 0,

            },{
                name: '2021',
                value: 0,
                value2: 0,

            },{
                name: '2022',
                value: 0,
                value2: 0,
            },
            ]
      },
      showWarn: false,
      videoTalent: {
        zyrc: 0,
        ptry: 0,
        qzyy: 0
      },
      totalInfo: {
        zyrc_mb: 0,
        ptry_mb: 0,
        qzyy_mb: 0
      },
      showTooltip: false,
      tooltipData: {
          qyslxj: 80,
          qysllxxj: 60,
          dqpsjzsl: 20,
          jnljrzjzsl: 50,
          qyzctbxj: 40,
          cyryyqyppzxj: 90
      },
      jzInfo: {
          ljjzs:500,
          ljjzrs:10,
        count1: 234,
        count2: 567,
        count3: 345,
        percentage1: 20,
        percentage2: 40,
        percentage3: 60
      },
      videoEconomy: {
        hdcp: 0,
        cyss: 0,
      },
      totalInfo2: {
        hdcp_mb: 0,
        cyss_mb: 0,
      },
      rlzyfzzs: 71.5,
      activeList: {
        rcqz: {
          qy_zphcs: 0,
          qy_gws: 0,
          rc_bms: 0,
          rc_yxrs: 0
        },
        fzhj: {
          qy_zcsl: 0,
          qy_btje: 0,
          rc_btzc: 0,
          rc_zchjrs: 0,
          rc_rjbtje: 0
        },
        rcjg: {
          qy_ycqys: 0,
          qy_jlqyycje: 0,
          rc: [{
              name: '博士',
              count: 0,
            },{
              name: '硕士',
              count: 0,
            },{
              name: '本科',
              count: 0,
            },{
              name: '专科',
              count: 0,
            }]
        },
      },

      professionalInfo: {
        jobCount: '1234',
        jobNeedCount: '1234',
        ratio: '1.2',
        lackCount: 1234,
        list: [{
          name: '岗位1',
          value: '123',
          ratio: '1.1'
        },{
          name: '岗位2',
          value: '890',
          ratio: '1.03'
        },{
          name: '岗位3',
          value: '1212',
          ratio: '1.32'
        },{
          name: '岗位4',
          value: '455',
          ratio: '1.89'
        },{
          name: '岗位5',
          value: '455',
          ratio: '1.89'
        },{
          name: '岗位6',
          value: '455',
          ratio: '1.89'
        },{
          name: '岗位7',
          value: '455',
          ratio: '1.89'
        }]
      },
      ratio: 30,
      yjqyxq:1212,
      supportInfo: {
        count: '192834',
        percentage: 50
      },
      warnData: {
        module1: {
          value1: 0,
          value2: 0,
          list: [{
            name: '1月',
            value: 0,
          },{
            name: '3月',
            value: 0,
          },{
            name: '3月',
            value: 0,
          },{
            name: '4月',
            value: 0,
          },{
            name: '5月',
            value: 0,
          }]
        },
        module2:{
          value1: 0,
          value2: 0,
          legend: ['2021年入驻数', '2022年入驻数', '当前拍摄剧组数'],
          list:[{
            name: '1月',
            value1: 0,
            value2: 0,
            value3: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
            value3: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
            value3: 0,
          },{
            name: '4月',
            value1: 0,
            value2: 0,
            value3: 0,
          },{
            name: '5月',
            value1: 0,
            value2: 0,
            value3: 0,
          }]
        },
        module3: {
          value1: 0,
          value2: 0,
          legend1: ['2021年', '2022年'],
          // 从业人员           从业人员与企业匹配值
          legend2: ['从业人员', '从业人员与企业匹配值'],
          list1:[{
            name: '1月',
            value1: 0,
            value2: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
          },{
            name: '4月',
            value1: 0,
            value2: 0,
          },{
            name: '5月',
            value1: 0,
            value2: 0,
          }],
          list2:[{
            name: '1月',
            value1: 0,
            value2: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
          },{
            name: '4月',
            value1: 0,
            value2: 0,
          },{
            name: '5月',
            value1: 0,
            value2: 0,
          }]
        }
      }
      /*warnData: {
        "module1": {
          "value2": "89",
          "value1": "86",
          "list": [
            {
              "name": "202202",
              "value": "1505"
            },
            {
              "name": "202203",
              "value": "1491"
            },
            {
              "name": "202204",
              "value": "1484"
            },
            {
              "name": "202205",
              "value": "1487"
            },
            {
              "name": "202206",
              "value": "1476"
            }
          ]
        },
        "module3": {
          "legend2": [
            "从业人员",
            "从业人员与企业匹配值"
          ],
          "list1": [
            {
              "name": "202202",
              "value": "426"
            },
            {
              "name": "202203",
              "value": "817"
            },
            {
              "name": "202204",
              "value": "191"
            },
            {
              "name": "202205",
              "value": "340"
            },
            {
              "name": "202206",
              "value": "1145"
            }
          ],
          "legend1": [
            "2021年",
            "2022年"
          ],
          "value2": "94",
          "value1": "93",
          "list2": [
            {
              "name": "202202",
              "value": "7.6"
            },
            {
              "name": "202203",
              "value": "6.9"
            },
            {
              "name": "202204",
              "value": "4.3"
            },
            {
              "name": "202205",
              "value": "4.7"
            },
            {
              "name": "202206",
              "value": "5.3"
            }
          ]
        },
        "module2": {
          "value2": "92",
          "value1": "91",
          "legend": [
            "2021年入驻数",
            "2022年入驻数",
            "当前拍摄剧组数"
          ],
          "list": [
            {
              "value2": "18",
              "value1": "25",
              "value3": "26",
              "name": "202202"
            },
            {
              "value2": "21",
              "value1": "39",
              "value3": "45",
              "name": "202203"
            },
            {
              "value2": "21",
              "value1": "35",
              "value3": "57",
              "name": "202204"
            },
            {
              "value2": "21",
              "value1": "32",
              "value3": "62",
              "name": "202205"
            },
            {
              "value2": "19",
              "value1": "29",
              "value3": "68",
              "name": "202206"
            }
          ]
        }
      }*/
    }
  },
  mounted() {
    console.log("mounted")
    this.resetData()
    setInterval(() => {
      this.resetData()
    }, 1000*60);
  },
  methods: {
    resetData() {
      let params = {
      };
      let url ='/dyrl/screen/query/xtzs'
      //let url='/jhApi/dsb/getSa02';
      console.log('调用接口');
      this.$api.commonPost(url,params).then(res=>{

        if(res.data.code === 0){
          console.log(res.data.result);
          this.jjzs=res.data.result.jjzs;
          this.jjyc=res.data.result.jjyc;
          this.videoTalent =res.data.result.videoTalent;
          this.totalInfo = res.data.result.totalInfo;
          this.jzInfo = res.data.result.jzInfo;
          this.videoEconomy = res.data.result.videoEconomy;
          this.totalInfo2 = res.data.result.totalInfo2;
          this.rlzyfzzs =res.data.result.rlzyfzzs;
          this.activeList = res.data.result.activeList;
          this.professionalInfo = res.data.result.professionalInfo;
          this.ratio =  res.data.result.ratio;
          this.yjqyxq=res.data.result.yjqyxq;
          this.supportInfo =res.data.result.supportInfo;
          this.warnData =res.data.result.warnData;
          this.tooltipData =res.data.result.tooltipData;

        }else{
          console.log("error:");
          this.$message({
            type: 'error',
            message: res.data.code,
            duration: 1500
          })
        }

      })
      /*this.jjzs = {
        cyqy: Math.floor(Math.random() * 1000 + 600),
        gsqy: Math.floor(Math.random() * 1000 + 600),
        hdyy: Math.floor(Math.random() * 1000 + 600),
          //ysrczb: Math.floor(Math.random() * 80 + 20),
          ysrczb:50,
        dyzcqy: Math.floor(Math.random() * 1000 + 600)
      }
      this.jjyc = {
        cyjjqs: [{
                name: '2018',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500)
            },{
                name: '2019',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500)
            },{
                name: '2020',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500)
            },{
                name: '2021',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500)
            },{
                name: '2022',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500)
            },
          ],
        rlzyjjqs: [{
                name: '2018',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
                value3: Math.floor(Math.random() * 500 + 500),
            },{
                name: '2019',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
                value3: Math.floor(Math.random() * 500 + 500),
            },{
                name: '2020',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
                value3: Math.floor(Math.random() * 500 + 500),
            },{
                name: '2021',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
                value3: Math.floor(Math.random() * 500 + 500),
            },{
                name: '2022',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
                value3: Math.floor(Math.random() * 500 + 500),
            },
            ],
          jzjjqs: [{
                name: '2018',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),

            },{
                name: '2019',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),

            },{
                name: '2020',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),

            },{
                name: '2021',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),

            },{
                name: '2022',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
            },
            ]
      }
      this.videoTalent = {
        zyrc: Math.floor(Math.random() * 1000 + 600),
        ptry: Math.floor(Math.random() * 1000 + 600),
        qzyy: Math.floor(Math.random() * 1000 + 600)
      }
      this.totalInfo = {
        zyrc_mb: Math.floor(Math.random() * 1000 + 600),
        ptry_mb: Math.floor(Math.random() * 1000 + 600),
        qzyy_mb: Math.floor(Math.random() * 1000 + 600)
      }
      this.jzInfo = {
          ljjzs:500,
          ljjzrs:10,
        count1: Math.floor(Math.random() * 1000 + 500),
        count2: Math.floor(Math.random() * 1000 + 500),
        count3: Math.floor(Math.random() * 1000 + 500),
        percentage1: Math.floor(Math.random() * 80 + 20),
        percentage2: Math.floor(Math.random() * 80 + 20),
        percentage3: Math.floor(Math.random() * 80 + 20)
      }
      this.videoEconomy = {
        hdcp: Math.floor(Math.random() * 1000 + 600),
        cyss: Math.floor(Math.random() * 1000 + 600)
      }
      this.totalInfo2 = {
        hdcp_mb: Math.floor(Math.random() * 1000 + 600),
        cyss_mb: Math.floor(Math.random() * 1000 + 600),
      }
      this.rlzyfzzs = Math.floor(Math.random() * 70 + 30)
      this.activeList = {
        rcqz: {
          qy_zphcs: Math.floor(Math.random() * 1000 + 600),
          qy_gws: Math.floor(Math.random() * 1000 + 600),
          rc_bms: Math.floor(Math.random() * 1000 + 600),
          rc_yxrs: Math.floor(Math.random() * 1000 + 600)
        },
        fzhj: {
          qy_zcsl: Math.floor(Math.random() * 1000 + 600),
          qy_btje: Math.floor(Math.random() * 1000 + 600),
          rc_btzc: Math.floor(Math.random() * 1000 + 600),
          rc_zchjrs: Math.floor(Math.random() * 1000 + 600),
          rc_rjbtje: Math.floor(Math.random() * 1000 + 600)
        },
        rcjg: {
          qy_ycqys: Math.floor(Math.random() * 1000 + 600),
          qy_jlqyycje: Math.floor(Math.random() * 1000 + 600),
          rc: [{
              name: '博士',
              count: Math.floor(Math.random() * 1000 + 600),
            },{
              name: '硕士',
              count: Math.floor(Math.random() * 1000 + 600),
            },{
              name: '本科',
              count: Math.floor(Math.random() * 1000 + 600),
            },{
              name: '专科',
              count: Math.floor(Math.random() * 1000 + 600),
            }]
        }
      }
      this.professionalInfo = {
        jobCount: Math.floor(Math.random() * 1000 + 500),
        jobNeedCount: Math.floor(Math.random() * 1000 + 500),
        ratio: Math.random().toFixed(1),
        lackCount: Math.floor(Math.random() * 1000 + 500),
        list: [{
          name: '岗位1',
          value: Math.floor(Math.random() * 1000 + 500)
        },{
          name: '岗位2',
          value: Math.floor(Math.random() * 1000 + 500)
        },{
          name: '岗位3',
          value: Math.floor(Math.random() * 1000 + 500)
        },{
          name: '岗位4',
          value: Math.floor(Math.random() * 1000 + 500)
        },{
          name: '岗位5',
          value: Math.floor(Math.random() * 1000 + 500)
        }]
      }
      this.ratio =  60
      this.yjqyxq=Math.floor(Math.random() * 1000 + 500)
      this.supportInfo ={
        count: Math.floor(Math.random() * 1000 + 500),
        percentage: Math.floor(Math.random() * 80 + 20)
      }*/
    }
  }

}
</script>
<style lang="less" scoped>
.videobg{
  width: 1208px;
  height: 640px;
  position: absolute;
  left: 356px;
  top: 120px;
  mix-blend-mode: screen;
  z-index: 1;
}
.flex {
  display: flex;
}
.pad20 {
  padding: 20px;
}
.mLeft {
  background-image: linear-gradient(180deg, rgba(8,132,255,0.00) 0%, rgba(8,132,255,0.12) 100%);
}

.img {
  width: 48px;
  height: 48px;
  background-image: url('../assets/yujing_normal.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  cursor: pointer;
  bottom: 30px;
  right: 50px;
  &:hover {
    background-image: url('../assets/yujing_cur.svg');
  }
}
.center_top {
  height: 640px;
  margin-left: 20px;
  position: relative;
  margin-top: 10px;
  .side {
    position: relative;
    height: 438px;
    //background-image: url('../assets/center_top_left.png');
    //background-repeat: no-repeat;
    //background-size: 258px 100%;
    &::before {
      content: " ";
      position: absolute;
      width: 258px;

      height: 438px;
      //background-image: url('../assets/center_top_right.png');
      //background-repeat: no-repeat;
      //background-size: 258px 100%;
      //right: 0;
    }
  }
  video {
    width: 100%;
    height: 640px;
    position: absolute;
    left: 0;
    top: 0;
    mix-blend-mode: screen;
  }
  .number {
    position: absolute;
    top: calc(16%);
    left: 40%;
    text-align: center;

    .value {
      font-family: LetsgoDigital-Regular;
      font-size: 72px;
      color: #64E6E2;
      letter-spacing: 0;
      font-weight: 700;
    }
    .label {
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
}
.center_bottom {
  margin-left: 20px;
  padding: 20px;
  background-image: linear-gradient(180deg, rgba(8,132,255,0.00) 0%, rgba(8,132,255,0.16) 100%);
  display: flex;
  box-sizing: border-box;
}
.right_top {
  position: relative;
  box-sizing: border-box;
  height: 280px;
}
.group_info {
  flex:1;
  text-align:left;
  padding-left:20px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .total {
    background: rgba(8,132,255,0.24);
    width: 100%;
    height: 16px;
    margin-top: 10px;
    position: relative;
    &::before {
      content: " ";
      height: 8px;
      position: absolute;
      width: 60%;
      top: 4px;
      left: 4px;
      background-image: linear-gradient(270deg, #0884FF 0%, #0884FF 100%);
    }
  }
  .ratio {
    background: rgba(8,132,255,0.24);
    width: 100%;
    height: 16px;
    margin-top: 10px;
    position: relative;
    &::before {
      content: " ";
      height: 8px;
      position: absolute;
      width: var(--ratio);
      top: 4px;
      left: 4px;
      background-image: linear-gradient(270deg, #FF453A 0%, #0884FF 100%);
    }
  }
}

</style>
